<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/jquery-3.7.1.js"></script>
<style>
    .kcld {
        font-size: 16px;
    }
</style>

<body>
    <table border="1">
        <thead>
            <tr>
                <td colspan="2" style="text-align: center;">
                    <span id="classNameId">班级名</span>
                    <!-- <button onclick="button()">点击隐藏1</button> -->
                    <!-- <button id="hide">点击隐藏2</button>
                    <button id="show">点击隐藏3</button> -->
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="20%">
                    <span class="kcld">课程列表</span>
                </td>
                <td>
                    <span></span>
                </td>
            </tr>
        </tbody>
    </table>
    <table class="table" border="1">
        <thead>
            <tr>
                <td colspan="9" style="text-align: center;">
                    <span>同学列表</span>
                    <!-- <button onclick="fun()">加一行</button>
                    <button onclick="del()">减一行</button> -->
                </td>
            </tr>
        </thead>
        <tbody>
            <tr id="clo">
                <td id="td"><samp>同学1</samp></td>
                <td><samp>同学2</samp></td>
                <td><samp>同学3</samp></td>
                <td><samp>同学4</samp></td>
                <td><samp>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</samp></td>
                <td><samp>同学5</samp></td>
                <td><samp>同学6</samp></td>
                <td><samp>同学7</samp></td>
                <td><samp>同学8</samp></td>
            </tr>
        </tbody>
    </table>

</body>
<script>
    // $("#classNameId").html("我要改的班级名");
    // $(".kcld").html("改课程列表");
    // $("#hide").click(function () {
    //     $("#classNameId").hide();
    // });
    // $("#show").click(function () {
    //     $("#classNameId").show();
    // });
    // // $("button").click(function () {
    // //     $("#classNameId").toggle();
    // // });
    // // var i = 1;
    // $(".td").each(function () {
    //     $(this).html(i++);
    // })
    // function fun() {
    //     var b = $("#clo").clone();
    //     $(".table").append(b);
    //     // var i = 1;
    //     $(".td").each(function () { $(this).html(i++); })
    //     $("table tr:last").find(":input").val('');
    // };
    // function del() {
    //     $("table tr:not(:first):not(:first):last").remove();
    // };
    $.getJSON("./student.json", function (jsonData) {
        $("#classNameId").html(jsonData.className);
        // $.each(jsonData.studenst, function (i, value) {
        //     // console.log(value);
        //     for (let ins=i; ins>=0 ; ins--) {
        //         $(value).html(jsonData.studenst[ins].name);
        //     }
        // });
        // $(".td").html(jsonData.studenst[0].name);

    })
    $.getJSON("./zuowei.json", function (jsonData) {
        $("#td").html(jsonData["1-1"]);
    })
</script>

</html>